<template>
  <el-select ref="selectRef" v-model="selectedValue" placeholder="请选择" @visible-change="handleVisibleChange"
    popper-class="custom-select-dropdown" :filterable="filterable" :filter-method="filterMethods">
    <el-option v-for="item in options" :key="item[keys]" :label="item[label]" :value="retuenItem ? ieme : item[keys]" />
  </el-select>
</template>

<script setup>
import { ref, onBeforeUnmount, nextTick, defineProps, defineEmits } from 'vue';
import { throttle } from 'lodash-es';

// 接收父组件传递的选项数据
const props = defineProps({
  options: {
    type: Array,
    default: () => []
  },
  keys: {
    type: String,
    default: "value",
  },
  label: {
    type: String,
    default: "label",
  },
  retuenItem: {
    type: Boolean,
    default: false
  },
  filterable: {
    type: Boolean,
    default: false
  },
  hasMore: {
    type: Boolean,
    default: false
  }
});

// 定义触发父组件加载更多数据的事件
const emits = defineEmits(['loadMore']);

const selectRef = ref(null);
const selectedValue = ref('');
let scrollElement = null;

// 原始滚动处理函数
const originalHandleScroll = (event) => {
  try {
    const { scrollTop, scrollHeight, clientHeight } = event.target;
    const reachBottom = scrollTop + clientHeight >= scrollHeight - 30;

    // 只有还有更多数据且滚动到底部时才触发
    if (reachBottom && props.hasMore) {
      console.log('触发加载更多');
      emits('loadMore');
    }
  } catch (error) {
    console.error('滚动事件处理出错:', error);
  }
};

// 节流后的滚动处理函数，每 200ms 执行一次
const handleScroll = throttle(originalHandleScroll, 500);

const handleVisibleChange = async (visible) => {
  console.log('下拉框显示状态改变:', visible);
  if (visible) {
    try {
      await nextTick();
      // 增加一些延迟确保元素完全渲染
      await new Promise((resolve) => setTimeout(resolve, 100));
      const dropdown = document.querySelector('.custom-select-dropdown');
      console.log('查找下拉框元素:', dropdown);
      if (dropdown) {
        scrollElement = dropdown.querySelector('.el-select-dropdown__wrap');
        console.log('查找滚动容器元素:', scrollElement);
        if (scrollElement) {
          scrollElement.removeEventListener('scroll', handleScroll);
          scrollElement.addEventListener('scroll', handleScroll);
          console.log('滚动事件绑定成功');
        } else {
          console.log('未找到滚动容器');
        }
      } else {
        console.log('未找到下拉框元素');
      }
    } catch (error) {
      console.error('下拉框显示时出错:', error);
    }
  } else {
    if (scrollElement) {
      scrollElement.removeEventListener('scroll', handleScroll);
      scrollElement = null;
    }
  }
};
const filterMethods = (e) => {
  console.log(e, '2222211')
  emits('loadMore', e);
}
onBeforeUnmount(() => {
  if (scrollElement) {
    scrollElement.removeEventListener('scroll', handleScroll);
  }
});
</script>

<style scoped>
/* 强制滚动样式 */
::v-deep .custom-select-dropdown {
  width: inherit;
  /* 继承父元素宽度 */
}

::v-deep .custom-select-dropdown .el-select-dropdown__wrap {
  height: 300px;
  overflow: auto;
  max-width: 100%;
  /* 确保不超出父元素宽度 */
}

::v-deep .el-select__wrapper {
  min-height: 36px !important;
  padding: 1px 16px !important;
}
</style>